<template>
  <div>
    <el-card style="height: 220px">
      <div class="rongq">
        <div>
          <p>ID</p>
          <span>{{ ruleForm.id }}</span>
          <p>备注</p>
          <span>{{ ruleForm.remark }}</span>
        </div>
        <div>
          <p>名称</p>
          <span>{{ ruleForm.name }}</span>
          <p>品牌</p>
          <span>{{ ruleForm.brand }}</span>
        </div>
        <div>
          <p>描述</p>
          <span>{{ ruleForm.description }}</span>
          <p>计量单位</p>
          <span>{{ measureUnit.displayName}}</span>
           <p>商户</p>
          <span>{{ merchant.displayName }}</span>
        </div>
        <div>
          <p>产地</p>
          <span>{{ ruleForm.origin }}</span>
          <p>最后更新时间</p>
          <span>{{ ruleForm.lastUpdateTime }}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Details",
  // 接受父组件传过来的数据
  data() {
    return {
      ruleForm: {},
    };
  },
  methods: {
    // 获取当前对象并保存
    getTails(row) {
      this.ruleForm = row;
    },
  },
  mounted() {
    this.$bus.$on("details", this.getTails);
  },
  computed:{ 
    measureUnit(){ 
      return this.ruleForm.measureUnit||{}
    },
    merchant(){ 
      return this.ruleForm.merchant||{}
    },
  }
};
</script>

<style lang='scss' scoped>
.rongq {
  display: flex;
  justify-content: space-around;
}
p {
  font-size: 12px;
  color: rgb(180, 179, 179);
}
span {
  display: block;
  margin-bottom: 10px;
}
</style>
